<template>
	<view class="box-main">
		<view v-for="(item,index) in dataList" :key="index" class="box-common">
			<view class="flex ac ">
				<view v-if="item.user && item.user.avatar">
					<image :src="item.user.avatar" style="border-radius: 100%;width: 80rpx;height: 80rpx;">
					</image>
				</view>
				<view v-else>
					<image src="../../../static/images/f.png" style="border-radius: 100%;width: 80rpx;height: 80rpx;">
					</image>
				</view>
				<view>
					<view class="ml-10 fw flex ac">
						<view v-if="item.company">
							<text>{{item.company.user_name || ''}}</text>
						</view>
						<view v-else>
							<text>{{item.user.nickname || ''}}</text>
						</view>
						<view v-if="item.company">
							<text class="ml-10 mr-10" style="color: #999;">/</text>
							<text style="color: #999999;">{{item.company.position || '其他'}}</text>
							<text class="iconfont-yjgs  ml-10" style="color: #FF9900;">
								&#xe669;
							</text>
						</view>
					</view>
					<view v-if="item.company" class="ml-10 ">
						<text class="fs-24" style="color: #9E9E9E;">{{item.company.name}}</text>
					</view>
				</view>
			</view>
			<view :class="true ? 'mt-20' : ''" style="margin-left: 90rpx;">
				<view @click="commonClick(item)">
					{{item.content || ''}}
				</view>

				<view class="flex ac mb-20">
					<view class="mt-20">
						<text style="color: #9E9E9E;">{{utilsFunc('timeToHow',item.create_time)}}</text>
					</view>
					<view @click="commonReply(item)" class="box-coomm ml-30">
						<text>回复</text>
					</view>
				</view>

				<view v-for="(cur,_index) in item.comment" :key="_index" class="mb-40">
					<view class="mt-20 flex ac">
						<view v-if="cur.user && cur.user.avatar" class="pos-r" style="top: 6rpx;">
							<image :src="cur.user.avatar" style="border-radius: 100%;width: 65rpx;height: 65rpx;">
							</image>
						</view>
						<view v-else class="pos-r" style="top: 6rpx;">
							<image src="../../../static/images/f.png"
								style="border-radius: 100%;width: 65rpx;height: 65rpx;">
							</image>
						</view>
						<view>
							<view class="ml-10 fw flex ac">
								<view v-if="cur.company">
									<text>{{cur.company.user_name || ''}}</text>
								</view>
								<view v-else>
									<text>{{cur.user.nickname || ''}}</text>
								</view>
								<view v-if="cur.company">
									<text class="ml-10 mr-10" style="color: #999;">/</text>
									<text style="color: #999999;">{{cur.company.position || '其他'}}</text>
									<text class="iconfont-yjgs  ml-10" style="color: #FF9900;">
										&#xe669;
									</text>
								</view>
							</view>
							<view v-if="cur.company" class="ml-10 ">
								<text class="fs-24" style="color: #9E9E9E;">{{cur.company.name}}</text>
							</view>
						</view>
					</view>
					<view style="margin-left: 72rpx;">
						<view class="flex">
							<view v-if="cur.reuser" class="mt-20">
								<text>回复</text>
								<text v-if="cur.reuser.company" class="ml-10"
									style="color: #0066FF;">{{cur.reuser.company.user_name}}</text>
								<text v-else class="ml-10"
									style="color: #0066FF;">{{cur.reuser.nickname || '未知'}}</text>
								<text class="ml-5 mr-10">:</text>
							</view>
							<view @click="twoCommonClick(cur)" class="mt-20">
								<text>{{cur.content || ''}}</text>
							</view>
						</view>
						<view class="flex ac">
							<view class="mt-20">
								<text style="color: #9E9E9E;">{{utilsFunc('timeToHow',cur.create_time)}}</text>
							</view>
							<view @click="towCommonReply(cur)" class="box-coomm ml-30">
								<text>回复</text>
							</view>
						</view>
					</view>
				</view>

				<view @click="openMore(item)" v-if="(item.count_reply - item.comment.length) > 0" class="fs-26"
					style="color: #9E9E9E;">
					<text>—展开{{(item.count_reply - item.comment.length) || 0}}条回复</text>
					<text class="iconfont-yjgs fs-24">
						&#xe78f;
					</text>
				</view>

				<!-- <view @click="packUP" v-if="item.count_reply > 0 && (item.count_reply - item.comment.length) < 0 " class="fs-26"
					style="color: #9E9E9E;">
					<text>—收起</text>
					<text class="iconfont-yjgs fs-24">
						&#xe791;
					</text>
				</view> -->

			</view>
			<view class="mt-30" style="width: 100%; height: 6rpx;background-color: #F7F7F7;">
			</view>
		</view>


		<!-- 空数据站位 -->
		<emptyPage v-if="!dataList || dataList.length <= 0"></emptyPage>
		<!-- end -->


		<!-- 加载更多 -->
		<uni-load-more :status="status" />
		<!-- end -->

		<view style="height: 120rpx;"></view>

		<!-- 底部发生区域 -->
		<view class="box-send">
			<view class="box-commen-send ">
				<view class="ml-30 flex ac" style=" width: 80%;">
					<text class="iconfont icon-pinglun2 " style="color: #9E9E9E;font-size: 40rpx;"></text>
					<input :cursor-spacing='60'  @blur="blurInput" @input="inputChange" :focus="inputFocus" maxlength="150"
						style="width: 100%;" class="ml-10" v-model="form.content" :placeholder="placeholder" />
					<text @click="closeInputFunc" v-if="showCloseInput" style="color: #9E9E9E;"
						class="iconfont icon-guanbi1"></text>
				</view>
				<view @click="sendMsg" class="mr-20 box-btn-send">
					<text>发送</text>
				</view>
			</view>
		</view>
		<!-- end -->


		<!-- 长安消息操作弹窗 -->
		<fui-button @click='fuiButtonClick' @cancel="fuiButtonCancel" :maskClosable='true' :show='fuiButtonShow'
			:itemList='itemList'></fui-button>
		<!-- end -->


	</view>
</template>

<script>
	import emptyPage from '@/pages/extend/components/emptyPage.vue'
	import {
		projectCommentCreate,
		projectCommentList,
		projectCommentDelete
	} from "@/api/extend.js"
	import fuiButton from "@/pages/extend/components/fui-actionsheet/fui-actionsheet.vue"
	export default {
		components: {
			fuiButton,
			emptyPage
		},
		data() {
			return {
				currentClickItem: {},
				showCloseInput: false,
				replyItem: {},
				inputFocus: false,
				placeholder: '分享你的高见',
				dataList: [],
				page: {
					current_page: 1,
					total: 0
				},
				options: {},
				itemList: [],
				fuiButtonShow: false,
				status: 'loading', // more loading noMore
				form: {
					content: ''
				}
			}
		},
		computed: {
			uid() {
				return this.$store.state.app.uid;
			}
		},
		onReachBottom() {
			if (this.status == 'noMore') return;
			this.page.current_page++;
			this.projectCommentList();
		},
		onLoad(options) {
			this.options = options;
			this.projectCommentList();
		},
		methods: {
			packUP() {

			},
			openMore(item) {
				if (!item.commonPage) {
					item.commonPage = 1;
				}
				projectCommentList({
					limit: 6,
					page: item.commonPage,
					level: 2,
					project_id: this.options.project_id,
					pid: item.id
				}).then(res => {
					if (res.status == 200) {

						if (item.commonPage == 1) {
							item.comment = res.data.data;
						} else {
							item.comment = [...item.comment, ...res.data.data];
						}

						item.commonPage++;
					}
				})
			},
			twoCommonClick(item) {
				if (this.uid == item.uid) {
					this.currentClickItem = item;
					this.itemList = ['删除'];
					this.fuiButtonShow = true;
				}
			},
			blurInput() {
				this.inputFocus = false;
			},
			inputChange() {
				if (this.form.content == '') {
					this.showCloseInput = false
				} else {
					this.showCloseInput = true
				}
			},
			closeInputFunc() {
				this.placeholder = '分享你的高见';
				this.replyItem = {};
				this.form.content = '';
				this.showCloseInput = false;
			},
			commonReply(item) {

				if (item.company) {
					this.placeholder = `回复@${item.company.user_name || '未知'}`;
				} else {
					this.placeholder = `回复@${item.user.nickname || '未知'}`;
				}
				this.inputFocus = true;
				this.replyItem = {
					...item,
					level: 1
				};
				this.showCloseInput = true
			},
			towCommonReply(item) {

				if (item.company) {
					this.placeholder = `回复@${item.company.user_name || '未知'}`;
				} else {
					this.placeholder = `回复@${item.user.nickname || '未知'}`;
				}
				this.inputFocus = true;
				this.replyItem = {
					...item,
					level: 2
				};
				this.showCloseInput = true;

			},
			utilsFunc(tag, param) {
				if (tag == 'timeToHow') {
					return this.$timer.timeToHow(param);
				}
			},
			projectCommentList() {
				projectCommentList({
					limit: 6,
					page: this.page.current_page,
					level: 1,
					project_id: this.options.project_id,
					pid: 0
				}).then(res => {
					this.page['current_page'] = res.data.current_page
					this.page['total'] = res.data.total;
					let dataList = res.data.data;

					if (dataList.length < 6) {
						this.status = 'noMore';
					} else {
						this.status = 'more';
					}

					this.dataList = [...this.dataList, ...dataList];
				})
			},
			sendMsg() {
				if (this.form.content == '') {
					uni.showToast({
						title: '请输入你的高见!',
						icon: 'none'
					})
					return
				}
				projectCommentCreate({
					pid: this.replyItem.level == 1 ? this.replyItem.id : this.replyItem.pid,
					re_uid: this.replyItem.uid,
					content: this.form.content,
					project_id: this.options.project_id,
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})

					if (res.status == 200) {
						this.form.content = '';
						this.dataList = [];
						this.projectCommentList();
					}
				})
			},
			fuiButtonClick(e) {
				if (e.text == '删除') {
					projectCommentDelete({
						id: this.currentClickItem.id,
						project_id: this.currentClickItem.project_id,
						pid: this.currentClickItem.pid
					}).then(res => {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						if (res.status == 200) {
							this.fuiButtonShow = false;
							this.dataList = []
							this.page.current_page = 1;
							this.projectCommentList();
						}
					})
				}
			},
			commonClick(item) {
				if (this.uid == item.uid) {
					this.currentClickItem = item;
					this.itemList = ['删除'];
					this.fuiButtonShow = true;
				}
			},
			fuiButtonCancel() {
				this.fuiButtonShow = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box-btn-send {
		margin-left: 20rpx;
		border-radius: 60rpx;
		color: white;
		text-align: center;
		line-height: 60rpx;
		width: 120rpx;
		height: 60rpx;
		background-color: #0066FF;
	}

	.box-btn-send:active {
		opacity: .5;
	}

	.box-send {
		// padding: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #FFFFFF;
	}

	.box-commen-send {
		background-color: #F7F7F7;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: auto;
		margin-right: auto;
		border-radius: 50rpx;
		width: 90%;
		height: 90rpx;
	}

	.box-coomm {
		padding-top: 6rpx;
		padding-bottom: 6rpx;
		font-size: 26rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		width: fit-content;
		padding-left: 20rpx;
		padding-right: 20rpx;
		background-color: #F7F7F7;
	}

	.box-common {
		padding: 30rpx;
	}

	.box-main {
		min-height: 100vh;
		padding: 20rpx;
		background-color: white;
	}
</style>